<!DOCTYPE html>
<!-- <html lang="en"> -->
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../00_static/js/vue.js" type="text/javascript"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <title>过滤器</title>
</head>

<body>
    <div id="app">
        <h2>显示格式化后的时间</h2>
        <h3>{{time}}</h3>
        <h3>{{time | dateFormater}}</h3>
        <h3>{{fmtData()}}</h3>
    </div>

    <script type="text/javascript">
        // 全局注册过滤器
        Vue.filter('dateFormater', function (value, str = 'YYYY-MM-DD') {
            return moment(value).format(str)
        })

        new Vue({
            el: '#app',
            data: {
                time: Date.now()
            },
            methods: {
                fmtData() {
                    moment.locale('zh-cn');
                    // return moment(this.time).format('MMMM Do YYYY, h:mm:ss a');
                    return moment(this.time).format('LLLL');
                }
            }
        })
    </script>
</body>

</html>